<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">

<head>
    <title>添加评论 - 图书馆管理系统</title>
</head>

<body>
    <section>
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>添加评论</h2>
            <a href="/comment/list" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>

        <div class="card">
            <div class="card-body">
                <form id="addCommentForm">
                    <div class="form-group">
                        <label for="userId">评论用户</label>
                        <select class="form-control" id="userId" name="userId" required>
                            <option value="">请选择用户</option>
                            <option th:each="user : ${users}" th:value="${user.id}"
                                th:text="${user.name + ' (' + user.username + ')'}">用户名</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="bookId">图书</label>
                        <select class="form-control" id="bookId" name="bookId" required>
                            <option value="">请选择图书</option>
                            <option th:each="book : ${books}" th:value="${book.id}" th:text="${book.name}">图书名称</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="rating">评分</label>
                        <select class="form-control" id="rating" name="rating" required>
                            <option value="">请选择评分</option>
                            <option value="5">5星</option>
                            <option value="4">4星</option>
                            <option value="3">3星</option>
                            <option value="2">2星</option>
                            <option value="1">1星</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="content">评论内容</label>
                        <textarea class="form-control" id="content" name="content" rows="5" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="status">状态</label>
                        <select class="form-control" id="status" name="status" required>
                            <option value="1">显示</option>
                            <option value="0">隐藏</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> 保存
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <script>
            $(document).ready(function () {
                $('#addCommentForm').submit(function (e) {
                    e.preventDefault();
                    
                    const formData = {
                        userId: $('#userId').val(),
                        bookId: $('#bookId').val(),
                        rating: $('#rating').val(),
                        content: $('#content').val(),
                        status: $('#status').val()
                    };

                    $.ajax({
                        url: '/comment/api/add',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(formData),
                        success: function (res) {
                            if (res.code === 200) {
                                alert('添加成功！');
                                window.location.href = '/comment/list';
                            } else {
                                alert('添加失败：' + res.message);
                            }
                        },
                        error: function () {
                            alert('服务器错误，请稍后再试！');
                        }
                    });
                });
            });
        </script>
    </section>
</body>

</html> 